<script setup>
import element_plus from '@/assets/images/element-plus-logo.svg';</script>
<template>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
        @select="handleSelect">
        <el-menu-item index="0" @click="goToElement_plus()">
            <img style="width: 100px" :src="element_plus" alt="Element logo" />
        </el-menu-item>
        <el-menu-item index="1" @click="goToSearch()"><el-icon>
                <Search />
            </el-icon>搜索主页</el-menu-item>
        <el-menu-item index="2" @click="goToNewsItemsPage()"><el-icon>
                <UploadFilled />
            </el-icon>最新收录词条</el-menu-item>
        <el-menu-item index="3" @click="goToQuestionPage()"><el-icon>
                <List />
            </el-icon>最新问卷调查</el-menu-item>
        <div class="flex-grow" />
        <el-menu-item index="4" @click="goToUesrPage()">
            <el-icon>
                <UserFilled />
            </el-icon>
            {{ userName }}的个人空间</el-menu-item>
    </el-menu>
</template>




<!-- <script lang="ts" setup>
import { ref } from 'vue'
import router from '../router';

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

const goToHomeByName = () => {
    router.push({ name: 'NewCollectedItems' }); // 假设在路由配置中定义了名称为 'home' 的路由
};
const goToHome = () => {
    router.push({ name: 'Home' }); // 假设在路由配置中定义了名称为 'home' 的路由
};


</script> -->
<script>
import { defineComponent } from 'vue';
import router from '../router';

export default {
    name: 'YourComponent',
    data() {
        return {
            activeIndex: '1'
        };
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        goToElement_plus() {
            window.location.href = 'https://element-plus.org/zh-CN/';
        }
    },
    props: {
        goToNewQuestionnaire: Function,
        goToSearch: Function,
        goToNewsItemsPage: Function,
        goToUesrPage: Function,
        goToQuestionPage: Function,
        userName: String,
    }
};
</script>

<!-- <script>
export default {
    data() {
        return {

        }
    },
    
}

</script> -->

<style scoped>
.flex-grow {
  flex-grow: 1;
}
.element-center {
  display: flex;
  justify-content: center;
}
</style>
